<template>
  <div class="penaltyInfo">
    <div class="penaltyInfo-top" v-if="props.title">
      <div class="penaltyInfo-top-tittle">案件详情</div>
    </div>
    <div class="penaltyInfo-body">
      <div class="penaltyInfo-body-box">
        <div class="penaltyInfo-body-box-tittle">
          <div class="penaltyInfo-body-box-tittle-left"></div>
          <div class="penaltyInfo-body-box-tittle-right">案件信息</div>
        </div>
        <div class="penaltyInfo-body-box-info">
          <a-descriptions
            :labelStyle="{ width: '160px' }"
            :content-style="{ color: '#444444', width: 'calc(100% / (24 / 5))' }"
            bordered
          >
            <a-descriptions-item label="案件来源" :span="1" v-if="penaltyData?.sourceName">{{
              penaltyData?.sourceName
            }}</a-descriptions-item>
            <a-descriptions-item
              :label="caseSendNames(penaltyData?.sourceName)"
              :span="1"
              v-if="penaltyData?.sourceName == '其他' && penaltyData?.otherSource"
              >{{ penaltyData?.otherSource }}</a-descriptions-item
            >
            <a-descriptions-item label="执法方式" :span="1" v-if="penaltyData?.enforceWay">{{
              caseEnforceWay(penaltyData?.enforceWay)
            }}</a-descriptions-item>
            <a-descriptions-item label="案由" :span="1" v-if="penaltyData?.caseActionName">{{
              penaltyData?.caseActionName
            }}</a-descriptions-item>
            <a-descriptions-item label="简要案情" :span="1" v-if="penaltyData?.caseBrief">{{
              penaltyData?.caseBrief
            }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
      <div class="penaltyInfo-body-box">
        <div class="penaltyInfo-body-box-tittle">
          <div class="penaltyInfo-body-box-tittle-left"></div>
          <div class="penaltyInfo-body-box-tittle-right">当事人信息</div>
        </div>
        <div class="penaltyInfo-body-box-info">
          <a-descriptions
            :labelStyle="{ width: '160px' }"
            :content-style="{ color: '#444444', width: 'calc(100% / (24 / 5))' }"
            bordered
          >
            <a-descriptions-item label="当事人类型" :span="1">{{
              casePartyType(penaltyData?.placeInfo.partyType)
            }}</a-descriptions-item>
            <a-descriptions-item
              :label="casePlaceName(penaltyData?.placeInfo.partyType)"
              :span="1"
              v-if="penaltyData?.placeInfo.placeName"
              >{{ penaltyData?.placeInfo.placeName }}</a-descriptions-item
            >
            <a-descriptions-item
              label="性别"
              :span="1"
              v-if="penaltyData?.placeInfo.sex && penaltyData?.placeInfo.partyType != 2"
              >{{ caseSex(penaltyData?.placeInfo.sex) }}</a-descriptions-item
            >
            <a-descriptions-item
              label="出生日期"
              :span="1"
              v-if="penaltyData?.placeInfo.birthDate"
              >{{ penaltyData?.placeInfo.birthDate }}</a-descriptions-item
            >
            <a-descriptions-item
              :label="caseContactsTel(penaltyData?.placeInfo.partyType)"
              :span="1"
              v-if="penaltyData?.placeInfo.contactsTel"
              >{{ penaltyData?.placeInfo.contactsTel }}</a-descriptions-item
            >
            <a-descriptions-item
              label="证照类型"
              :span="1"
              v-if="penaltyData?.placeInfo.idTypeName != ''"
              >{{ penaltyData?.placeInfo.idTypeName }}</a-descriptions-item
            >
            <a-descriptions-item
              :label="caseIdcode(penaltyData?.placeInfo.partyType)"
              :span="1"
              v-if="penaltyData?.placeInfo.idCode"
              >{{ penaltyData?.placeInfo.idCode }}</a-descriptions-item
            >
            <!-- <a-descriptions-item label="安全等级" :span="1">
              <div :style="caseSafeLevel(penaltyData?.placeInfo.safeLevel)">
                {{ caseSafeLevel2(penaltyData?.placeInfo.safeLevel) }}
              </div>
            </a-descriptions-item> -->
            <a-descriptions-item
              :label="caseHeadName(penaltyData?.placeInfo.partyType)"
              :span="1"
              v-if="penaltyData?.placeInfo.headName"
              >{{ penaltyData?.placeInfo.headName }}</a-descriptions-item
            >
            <a-descriptions-item
              :label="caseHeadTel(penaltyData?.placeInfo.partyType)"
              :span="1"
              v-if="penaltyData?.placeInfo.headTel && penaltyData?.placeInfo.partyType != 2"
              >{{ penaltyData?.placeInfo.headTel }}</a-descriptions-item
            >
            <a-descriptions-item
              :label="caseRegister(penaltyData?.placeInfo.partyType)"
              :span="1"
              v-if="
                penaltyData?.placeInfo.registerCity &&
                penaltyData?.placeInfo.registerCounty &&
                penaltyData?.placeInfo.registerTown &&
                penaltyData?.placeInfo.registerAddress &&
                penaltyData?.placeInfo.partyType != 0
              "
              >{{
                penaltyData?.placeInfo.registerCity +
                penaltyData?.placeInfo.registerCounty +
                penaltyData?.placeInfo.registerTown +
                penaltyData?.placeInfo.registerAddress
              }}</a-descriptions-item
            >
            <a-descriptions-item :label="caseOperate(penaltyData?.placeInfo.partyType)" :span="1">{{
              penaltyData?.placeInfo.operateCity +
              penaltyData?.placeInfo.operateCounty +
              penaltyData?.placeInfo.operateTown +
              penaltyData?.placeInfo.operateAddress
            }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
      <div class="penaltyInfo-body-box">
        <div class="penaltyInfo-body-box-tittle">
          <div class="penaltyInfo-body-box-tittle-left"></div>
          <div class="penaltyInfo-body-box-tittle-right">立案信息</div>
        </div>
        <div class="penaltyInfo-body-box-info">
          <a-descriptions
            :labelStyle="{ width: '160px' }"
            :content-style="{ color: '#444444', width: 'calc(100% / (24 / 5))' }"
            bordered
          >
            <a-descriptions-item label="立案意见" :span="1" v-if="penaltyData?.opinion">{{
              penaltyData?.opinion
            }}</a-descriptions-item>
            <a-descriptions-item
              :label="caseSendName(penaltyData?.opinion)"
              :span="1"
              v-if="
                (penaltyData?.opinion == '不属于我单位管辖，建议移送处理。' ||
                  penaltyData?.opinion == '其他') &&
                penaltyData?.sendName
              "
              >{{ penaltyData?.sendName }}</a-descriptions-item
            >
            <a-descriptions-item label="主办人" :span="1" v-if="penaltyData?.sponsor">{{
              penaltyData?.sponsor
            }}</a-descriptions-item>
            <a-descriptions-item label="协办人" :span="1" v-if="penaltyData?.organizer">{{
              penaltyData?.organizer
            }}</a-descriptions-item>
            <a-descriptions-item label="执法机构" :span="1" v-if="penaltyData?.agencyName">{{
              penaltyData?.agencyName
            }}</a-descriptions-item>
            <a-descriptions-item label="审批负责人" :span="1" v-if="penaltyData?.approveName">{{
              penaltyData?.approveName
            }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
      <div
        class="penaltyInfo-body-box"
        v-if="
          (penaltyData?.handleWay || penaltyData?.penaltyAmount || penaltyData?.executeResult) &&
          penaltyData?.status > 3
        "
      >
        <div class="penaltyInfo-body-box-tittle">
          <div class="penaltyInfo-body-box-tittle-left"></div>
          <div class="penaltyInfo-body-box-tittle-right">处理方式</div>
        </div>
        <div class="penaltyInfo-body-box-info">
          <a-descriptions :labelStyle="{ width: '160px' }" :content-style="contentStyle" bordered>
            <a-descriptions-item label="处理方式" :span="1" v-if="penaltyData?.handleWay">{{
              caseHandleWay(penaltyData?.handleWay)
            }}</a-descriptions-item>
            <a-descriptions-item label="罚款金额" :span="1" v-if="penaltyData?.penaltyAmount"
              >{{ penaltyData?.penaltyAmount }}元</a-descriptions-item
            >
            <a-descriptions-item label="执行结果" :span="1" v-if="penaltyData?.executeResult">{{
              caseExecuteResult(penaltyData?.executeResult)
            }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { useRoute } from 'vue-router';
  import { ref, onMounted } from 'vue';
  import { RightOutlined } from '@ant-design/icons-vue';
  import { caseDetail } from '@/api/supervision/case-management';
  const route = useRoute();
  defineOptions({
    name: 'penaltyInfo',
  });

  interface PropsInfo {
    id: any;
    title: boolean;
  }
  const props = withDefaults(defineProps<PropsInfo>(), {
    id: '',
    title: true,
  });

  const contentStyle = () => {
    if (
      penaltyData.value?.handleWay &&
      penaltyData.value?.penaltyAmount &&
      penaltyData.value?.executeResult
    ) {
      return { color: '#444444', width: 'calc(100% / (24 / 5))' };
    } else {
      return { color: '#444444' };
    }
  };

  const penaltyData = ref();
  const caseHandleWay = (val) => {
    switch (val) {
      case 1:
        return '行政处罚';
      case 2:
        return '停业';
      default:
        return '-';
    }
  };

  const caseEnforceWay = (val) => {
    switch (val) {
      case 1:
        return '委托执法';
      case 2:
        return '授权执法';
      default:
        return '-';
    }
  };

  const caseSendName = (val) => {
    switch (val) {
      case '其他':
        return '其他意见';
      case '不属于我单位管辖，建议移送处理。':
        return '移送单位名称';
      default:
        return '-';
    }
  };

  const caseSendNames = (val) => {
    switch (val) {
      case '其他':
        return '其他来源';
      default:
        return '-';
    }
  };

  const caseExecuteResult = (val) => {
    switch (val) {
      case 1:
        return '强制执行';
      case 2:
        return '正常执行';
      default:
        return '-';
    }
  };

  const casePlaceName = (val) => {
    switch (val) {
      case 0:
        return '姓名';
      case 1:
        return '单位名称';
      case 2:
        return '字号名称';
      case 3:
        return '单位名称';
      default:
        return '-';
    }
  };

  const caseContactsTel = (val) => {
    switch (val) {
      case 0:
        return '联系电话';
      case 1:
        return '单位联系电话';
      case 2:
        return '单位联系电话';
      case 3:
        return '单位联系电话';
      default:
        return '-';
    }
  };

  const caseIdcode = (val) => {
    switch (val) {
      case 0:
        return '证件号码';
      case 1:
        return '社会统一信用代码';
      case 2:
        return '社会统一信用代码';
      case 3:
        return '社会统一信用代码';
      default:
        return '-';
    }
  };

  const caseHeadName = (val) => {
    switch (val) {
      case 0:
        return '';
      case 1:
        return '法人';
      case 2:
        return '经营者姓名';
      case 3:
        return '负责人';
      default:
        return '-';
    }
  };

  const caseRegister = (val) => {
    switch (val) {
      case 0:
        return '';
      case 1:
        return '注册地址';
      case 2:
        return '注册地址';
      case 3:
        return '注册地址';
      default:
        return '-';
    }
  };

  const caseOperate = (val) => {
    switch (val) {
      case 0:
        return '地址';
      case 1:
        return '经营地址';
      case 2:
        return '经营地址';
      case 3:
        return '经营地址';
      default:
        return '-';
    }
  };

  const caseHeadTel = (val) => {
    switch (val) {
      case 0:
        return '';
      case 1:
        return '法人电话';
      case 2:
        return '';
      case 3:
        return '负责人电话';
      default:
        return '-';
    }
  };

  const caseSex = (val) => {
    switch (val) {
      case 1:
        return '男';
      case 2:
        return '女';
      default:
        return '-';
    }
  };

  const casePartyType = (val) => {
    switch (val) {
      case 0:
        return '自然人';
      case 1:
        return '法人';
      case 2:
        return '个体工商户';
      case 3:
        return '非法人组织';
      default:
        return '-';
    }
  };

  const caseSafeLevel = (val) => {
    if (val == 1) {
      return 'color: #02AD82';
    } else if (val == 2) {
      return 'color: #F5820F';
    } else if (val >= 3) {
      return 'color: #E22C4C';
    }
  };
  const caseSafeLevel2 = (val) => {
    if (val == 1) {
      return '安全';
    } else if (val == 2) {
      return '中等';
    } else if (val >= 3) {
      return '危险';
    }
  };

  onMounted(async () => {
    if (props.id) {
      const data = await caseDetail(props.id);
      penaltyData.value = data;
    }
  });
</script>
<style lang="less" scoped>
  .penaltyInfo {
    background-color: rgba(255, 255, 255, 1);
    &-top {
      &-tittle {
        padding: 0px 0 16px 0;
        font-size: 18px;
        font-weight: 700;
        line-height: 26px;
        color: rgba(68, 68, 68, 1);

        border-bottom: 1px solid rgba(240, 240, 240, 1);
      }
    }

    &-body {
      &-box {
        margin-bottom: 16px;
        &-tittle {
          display: flex;
          align-items: center;
          padding: 13px 0 13px 0;
          &-left {
            border: 1px solid #0f53ac;
            margin-right: 7px;
            border-radius: 4px;
            height: 14px;
          }

          &-right {
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
            color: rgba(68, 68, 68, 1);
          }
        }

        &-info {
          :global(.ant-descriptions-item-label) {
            width: 160px;
          }
        }
      }
    }
    .bottomBox {
      height: 60px;
    }
    .bottomBtns {
      width: calc(100% - 240px);
      padding: 8px 20px;
      background: rgba(255, 255, 255, 1);
      border-top: 1px solid rgba(240, 240, 240, 1);
      position: fixed;
      bottom: 0;
      text-align: right;
    }
  }
</style>
